iT邦幫忙

2021 iThome 鐵人賽

DAY 23
0
Modern Web

網頁前端基礎&Vue.js系列 第 23

javascript(DOM調整屬性與樣式&計時器)(DAY23)

  • 分享至 

  • xImage
  •  

這篇文章會介紹如何利用DOM動態的新增、取得、刪除元素的屬性值,以及認識javascript的計時器函式,並且將這篇所學結合一個常常在網路上看到的網站效果(照片自動輪番)的例子來讓大家更了解如何應用!

  • 動態調整元素屬性

setAttribute(,):新增指定的屬性&屬性值到元素中

img.setAttribute("src", S__16023554.jpg);
//在img中新增src屬性並給予S16023554.jpg屬性值

getAttribute():從特定元素中取得屬性值

img.getAttribute("src");
//取得img的src屬性值

removeAttribute():刪除指定的屬性

img.removeAttribute("src");
//刪除img的src屬性值
  • 動態調整元素樣式(style)

方法1:使用classList屬性:返回class類別中的集合,像是CSS中的類別選擇器:

<style>
        .change {
            border:solid;
            border-color:chartreuse;
        }
 </style>
  1. classList.add("類別名稱"):新增類別樣式
  2. classList.remove("類別名稱")刪除類別樣式
  3. classList.toogle("類別名稱"):將原本的類別更改成指定的類別樣式
    重要補充: 使用classList.add不會覆蓋掉元素中原本就有的class屬性,而若使用另一個類似的屬性
    classname則會覆蓋掉原本的class屬性!

方法2:直接更改元素中的style
document.getElementById(元素id).style.屬性= 屬性值;
ex: document.getElementById("myid").style.color = "green";

  • JS計時器(Timer)

設定計時器:
var mytimer= setInterval(change, 4000);
change為要呼叫的函式,4000為interval(隔多久呼叫一次函式,4000毫秒=4秒)
停止計時器:
clearInterval(mytimer);


Example:照片自動輪番

https://ithelp.ithome.com.tw/upload/images/20211003/20140225lIKSfamUz8.png

>>>經過4秒後,自動變換照片

https://ithelp.ithome.com.tw/upload/images/20211003/20140225SGZKDFyNI4.png

<head>
    <style>
        .set {
            border:solid;
            border-width:thick;
            border-color:darkturquoise;
        }
    </style>
    <script>
        setInterval(change, 4000);
        //4秒呼叫一次change函式
        var i = 0;
        //從第1張照片開始進入函式
        function change() {
            var smallimg = document.getElementById("s-picture").getElementsByTagName("img");
            var bigimg = document.getElementById("b-picture");
            smallimg[i].classList.remove("set");
            //移除第i張的set(class類別)
            i++;
            //轉換到下一張圖片
            if (i == smallimg.length) {
                i = 0;
            }
            //照片都跑完一輪後,從第一張照片開始跑
            smallimg[i].classList.add("set");
            //新增第i張的set(class類別)
            bigimg.setAttribute("src", smallimg[i].getAttribute("src"));
            //將小圖片的圖片檔放入大圖片的src值中
        }
    </script>
</head>
<body>
    <h1>照片定時輪番效果</h1>
    <div id="s-picture">
        <img class="set" src="S__16023554.jpg" height="200" width="200" />
        <img class="" src="S__44679189.jpg" height="200" width="200" />
        <img class="" src="S__44720220.jpg" height="200" width="200" />
        <img class="" src="S__44720222.jpg" height="200" width="200" />
    </div>
    <div>
        <img id="b-picture" src="S__16023554.jpg" />
    </div>
</body>

結語

這篇文章介紹了如何用DOM控制屬性與、樣式和設定計時器(timer),也利用這篇所認識的各種屬性做一個照片自動輪番的小範例。而Javascript的部分也在這邊告一個段落,下一篇將會進入vue.js!


上一篇
javascript表單資料處理&驗證(DAY22)
下一篇
Vue.js介紹及開發環境準備(DAY24)
系列文
網頁前端基礎&Vue.js30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言